<template>
  <div class="address">
    <van-nav-bar left-text="修改地址" left-arrow @click-left="onClickLeft" />
    <van-address-edit
      :show-area="false"
      show-delete
      :address-info="this.list"
      @delete="onDelete"
      @save="onSave"
    />
  </div>
</template>

<script>
import { address_edit, address_del } from "../../api";
export default {
  mounted() {
    this.id = window.localStorage.getItem("userid");
    console.log(this.$route.query);
    console.log(this.id);
  },
  data() {
    return {
      id: 0,
      list: {
        name: this.$route.query.name,
        tel: this.$route.query.tel,
        addressDetail: this.$route.query.address,
      },
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSave(address) {
      address_edit({
        userid: this.id,
        addressid: this.$route.query.id,
        address: address.addressDetail,
        phone: address.tel,
        name: address.name,
      }).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.$router.go(-1);
        }
      });
    },
    onDelete() {
      address_del({ userid: this.id, addressid: this.$route.query.id }).then(
        (res) => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.$router.go(-1);
          }
        }
      );
    },
  },
};
</script>

<style scoped>
::v-deep .van-nav-bar__text {
  color: black;
  font-weight: 800;
  font-size: 16px;
}
</style>